<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<base href="http://localhost:8080/jxc/" />
<title>注册页</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="static/css/style.css">
<link rel="icon" href="admin/t_logo.ico" type="img/x-ico" />
</head>
<body>

	<div class="login-main">
		<header class="layui-elip" style="width: 82%">用户注册</header>

		<!-- 表单选项 -->
		<form class="layui-form" id="formsubmit">
			<div class="layui-input-inline">
				<!-- 用户名 -->
				<div class="layui-inline" style="width: 85%">
					<input type="text" id="user" name="account" required
						lay-verify="required" placeholder="请输入用户名" autocomplete="off"
						class="layui-input">
				</div>
				<!-- 对号 -->
				<div class="layui-inline">
					<i class="layui-icon" id="ri"
						style="color: green; font-weight: bolder;" hidden></i>
				</div>
				<!-- 错号 -->
				<div class="layui-inline">
					<i class="layui-icon" id="wr"
						style="color: red; font-weight: bolder;" hidden>ဆ</i>
				</div>
			</div>
			<!-- 密码 -->
			<div class="layui-input-inline">
				<div class="layui-inline" style="width: 85%">
					<input type="password" id="pwd" name="password" required
						lay-verify="required" placeholder="请输入密码" autocomplete="off"
						class="layui-input">
				</div>
				<!-- 对号 -->
				<div class="layui-inline">
					<i class="layui-icon" id="pri"
						style="color: green; font-weight: bolder;" hidden></i>
				</div>
				<!-- 错号 -->
				<div class="layui-inline">
					<i class="layui-icon" id="pwr"
						style="color: red; font-weight: bolder;" hidden>ဆ</i>
				</div>
			</div>
			<!-- 确认密码 -->
			<div class="layui-input-inline">
				<div class="layui-inline" style="width: 85%">
					<input type="password" id="rpwd" name="repassword" required
						lay-verify="required" placeholder="请确认密码" autocomplete="off"
						class="layui-input">
				</div>
				<!-- 对号 -->
				<div class="layui-inline">
					<i class="layui-icon" id="rpri"
						style="color: green; font-weight: bolder;" hidden></i>
				</div>
				<!-- 错号 -->
				<div class="layui-inline">
					<i class="layui-icon" id="rpwr"
						style="color: red; font-weight: bolder;" hidden>ဆ</i>
				</div>
			</div>


			<div class="layui-input-inline login-btn" style="width: 85%">
				<button type="submit" lay-submit lay-filter="sub" class="layui-btn">注册</button>
			</div>
			<hr style="width: 85%" />
			<p style="width: 85%">
				<a href="users/login.html" class="fl">已有账号？立即登录</a><a href="javascript:;"
					class="fr">忘记密码？</a>
			</p>
		</form>
	</div>
	<script src="layui/layui.js"></script>
	<script type="text/javascript">
// 		var protocol = window.location.protocol;
// 		var host = window.location.host;
// 		var pathname = window.location.pathname;
// 		var projectName = pathname.substring(0,pathname.substr(1).indexOf('/') + 1);
		layui.use([ 'form','jquery','layer' ], function(form,$,layer) {
			//添加表单失焦事件
			//验证表单
			$('#user').blur(function() {
				var user = $(this).val();
				//校验用户名长度
				var ureg = /^[\w]{4,20}$/;
				if (!user.match(ureg)) {
					$('#wr').removeAttr('hidden');
					$('#ri').attr('hidden', 'hidden');
					layer.msg('用户名4-20字符可以是字母、数字、下划线 ')
				} else {
					$.ajax({
// 						url : projectName+"/user/checkuser",
						url : "user/checkuser",
						type : "post",
						dataType : "text",
						data : {
							userLoginName : user
						},
						//验证用户名是否可用
						success : function(data) {
							if (data == 1) {//用户名可用
								$('#ri').removeAttr('hidden');
								$('#wr').attr('hidden', 'hidden');

							} else {
								$('#wr').removeAttr('hidden');
								$('#ri').attr('hidden', 'hidden');
								layer.msg('该用户名已被注册! ')

							}

						}
					})
				}

			});
			// 为密码添加正则验证
			var reg = /^[\w]{6,16}$/;
			$('#pwd').blur(function() {
				if (!($('#pwd').val().match(reg))) {
					//layer.msg('请输入合法密码');
					$('#pwr').removeAttr('hidden');
					$('#pri').attr('hidden', 'hidden');
					layer.msg('请输入合法密码');
				} else {
					$('#pri').removeAttr('hidden');
					$('#pwr').attr('hidden', 'hidden');
				}
			});

			//验证两次密码是否一致
			$('#rpwd').blur(function() {
				if (($('#rpwd').val().match(reg))) {
				if ($('#pwd').val() == $('#rpwd').val()) {
					$('#rpri').removeAttr('hidden');
					$('#rpwr').attr('hidden', 'hidden');
				} else {
					$('#rpwr').removeAttr('hidden');
					$('#rpri').attr('hidden', 'hidden');
					layer.msg('两次输入密码不一致!');
				};
				}else{
					$('#rpwr').removeAttr('hidden');
					$('#rpri').attr('hidden', 'hidden');
				}
			});

			//
			//添加表单监听事件,提交注册信息
			form.on('submit(sub)', function() {
				$.ajax({
					url : 'user/adduser',
					type : 'post',
					dataType : 'text',
					data : $("#formsubmit").serialize(),
					success : function(data) {
						if (data == 1) {
							layer.msg('注册成功');
							location.href = "users/login.html";
						} else {
							layer.msg('注册失败');
						}
					}
				});
				//防止页面跳转
				return false;
			});

		});
	</script>
</body>
</html>